<template>
    <el-row>
        <el-card class="box-card" :body-style="{ padding: '0px' }">
            <el-row class="title"> <h4>个人收藏</h4></el-row>
            <el-table
            :data="tableData"
            style="width: 100%"
            :cell-style="{maxHeight:'30px'}"
            >
            <el-table-column label="商品名称" width="650px">
                <template slot-scope="scope"> 
                    <el-row>
                        <el-col :span="6"  class="img-box">
                            <img width="100%" height="100%" :src="scope.row.img" alt="">
                        </el-col>
                        <el-col :span="14">{{scope.row.text}}</el-col>
                    </el-row>
                </template>
            </el-table-column>
            <el-table-column
                prop="oldPrice"
                label="市场价格">
            </el-table-column>
            <el-table-column
                prop="newPrice"
                label="店内价格">
            </el-table-column>
            <el-table-column label="操作"> 
                <template slot-scope="scope">
                    <el-button  type="text" size="small">查看商品</el-button>
                    <el-button type="text" size="small"  @click.native.prevent="deleteRow(scope.$index, tableData)">删除收藏</el-button>
                </template>
            </el-table-column>
            </el-table>
        </el-card>
    </el-row>
</template>

<script>
export default {
    data(){
        return {
            tableData: [
                {
                    img: 'http://10.203.0.101:8081/shopping/resources/upload/97812ce7d175451484ce43705ad6d5c3.jpg',
                    text: ' 密园小农 密云当地新鲜西红柿 约2kg 自然熟 沙瓤 新鲜蔬菜',
                    oldPrice: '￥0.9',
                    newPrice: '￥0.7'
                }
            ]
        }
    },
    methods:{
        deleteRow(index, rows) {
            rows.splice(index, 1);
        }
    },
}
</script>

<style scoped>
.box-card {
    margin-top: 50px;
    width: 100%;
    
}
.title{
    background: #ddd;
}
h4{
    padding-left: 10px;
    margin: 0;
    height: 40px;
    line-height: 40px;
}
.img-box{
    width: 80px;
    height: 35px;
}
</style>